﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Shimba Bootstrap 4 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Beethemesdesign" name="author" />

    <!-- favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.png">


    <!-- Required css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />


</head>

<body>

    <!-- Begin page -->
    <div class="wrapper">

        <!-- ============================================================= -->
        <!-- ===============    side menu content start  ================= -->
        <!-- ============================================================= -->
        <div class="left-side-menu">
            <div class="slimscroll-menu">
                <!-------------------------------------->
                <!-- Put your logo hear in img tag -->
                <a href="index.html" class="logo">
                    <span class="logo-lg">
                        <img src="assets/images/logo.png" alt="">
                    </span>
                    <span class="logo-sm">
                        <img src="assets/images/logo_sm.png" alt="">
                    </span>
                </a>
                <!-- Logo content end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- User details start -->
                <div class="sidenav-user">
                    <h4 class="mb-1 mt-0">Cindy Deitch</h4>
                    <p class="mb-2">UI/UX Designer</p>
                    <img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle">
                </div>
                <!-- User details end -->
                <!-------------------------------------->
                <!-------------------------------------->
                <!-- Menu link start -->
                <ul class="metismenu side-nav">
                    <li class="menu-caption menu-item">Navigation</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-home"></i>
                            <span> Dashboards </span>
                            <span class="badge badge-success badge-pill float-right mr-3">New</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="dashboard-project.html">Project</a></li>
                            <li><a href="dashboard-sales.html">Sales</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-command"></i>
                            <span class="badge badge-danger badge-pill float-right mr-3">100+</span>
                            <span> Widgets </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="widgets-simple.html">Statistics</a></li>
                            <li><a href="widgets-data.html">Data</a></li>
                            <li><a href="widgets-chart.html">Chart</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">UI Components</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-box"></i>
                            <span> Bootstrap </span>
                            <span class="badge badge-primary-lighten badge-pill float-right mr-3">b4+</span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="ui-alert.html">Alert</a></li>
                            <li><a href="ui-badge.html">Badge</a></li>
                            <li><a href="ui-breadcumb.html">Breadcumb</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-cards.html">Cards</a></li>
                            <li><a href="ui-collapse.html">Collapsed</a></li>
                            <li><a href="ui-dropdown.html">Dropdown</a></li>
                            <li><a href="ui-modals.html">Modals</a></li>
                            <li><a href="ui-pagination.html">Pagination</a></li>
                            <li><a href="ui-progress.html">Progress</a></li>
                            <li><a href="ui-spinners.html">Spinners</a></li>
                            <li><a href="ui-tabs.html">Tabs</a></li>
                            <li><a href="ui-toast.html">Toast</a></li>
                            <li><a href="ui-tooltip-popover.html">Tooltip & Popover</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-layers"></i>
                            <span> Advance UI Kit </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="aui-alerts.html">Alert</a></li>
                            <li><a href="aui-calendar.html">Calendar</a></li>
                            <li><a href="aui-dragula.html">Dragula</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-document"></i>
                            <span> Forms </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="form-elements.html">Basic Elements</a></li>
                            <li><a href="form-advanced.html">Form Advanced</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-fileuploads.html">File Uploads</a></li>
                            <li class="menu-item">
                                <a href="javascript: void(0);" aria-expanded="false">Editors<span class="menu-sub-icon"></span></a>
                                <ul class="menu-level-third" aria-expanded="false">
                                    <li><a href="form-editors-summernote.html">Summernote</a></li>
                                    <li><a href="form-editors-simplemde.html">Simplemde</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-feather"></i>
                            <span> Icons </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="icons-drip.html">Drip</a></li>
                            <li><a href="icons-feather.html">Feather</a></li>
                            <li><a href="icons-ion.html">Ion</a></li>
                            <li><a href="icon-linear.html">Linear</a></li>
                            <li><a href="icons-material.html">Material</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Charts & Maps</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-pie-chart"></i>
                            <span> Charts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="charts-apex.html">Apex</a></li>
                            <li><a href="charts-chartjs.html">Chartjs</a></li>
                            <li><a href="charts-knob.html">Knob</a></li>
                            <li><a href="charts-morris.html">Morris</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-map"></i>
                            <span> Maps </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="maps-google.html">Google Maps</a></li>
                            <li><a href="maps-vector.html">Vector Maps</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Tables</li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-list"></i>
                            <span> Tables </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="tables-basic.html">Bootstrap Tables</a></li>
                            <li><a href="tables-datatable.html">Data Tables</a></li>
                        </ul>
                    </li>

                    <li class="menu-caption menu-item mt-1">Pages</li>
                    <li class="menu-item">
                        <a href="pages-starter.html" class="menu-link">
                            <i class="feather icon-monitor"></i>
                            <span> Sample Page </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-profile.html" class="menu-link">
                            <i class="feather icon-user"></i>
                            <span> User Profile </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-invoice.html" class="menu-link">
                            <i class="feather icon-printer"></i>
                            <span> Invoice </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="pages-faq.html" class="menu-link">
                            <i class="feather icon-help-circle"></i>
                            <span> FAQ </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-wifi-off"></i>
                            <span> Maintenance </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-404.html">Error 404</a></li>
                            <li><a href="pages-maintenance.html">Maintenance</a></li>
                            <li><a href="pages-comming-soon.html">Comming soon</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="feather icon-lock"></i>
                            <span> Authentication </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="pages-login.html">Login</a></li>
                            <li><a href="pages-login-2.html">Login 2</a></li>
                            <li><a href="pages-login-img.html">Login 3</a></li>
                            <li><a href="pages-register.html">Register</a></li>
                            <li><a href="pages-register-2.html">Register 2</a></li>
                            <li><a href="pages-register-img.html">Register 3</a></li>
                            <li><a href="pages-logout.html">Logout</a></li>
                            <li><a href="pages-logout-2.html">Logout 2</a></li>
                            <li><a href="pages-logout-img.html">Logout 3</a></li>
                            <li><a href="pages-recoverpw.html">Recover Password</a></li>
                            <li><a href="pages-recoverpw-2.html">Recover Password 2</a></li>
                            <li><a href="pages-recoverpw-img.html">Recover Password 3</a></li>
                            <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                            <li><a href="pages-lock-screen-2.html">Lock Screen 2</a></li>
                            <li><a href="pages-lock-screen-img.html">Lock Screen 3</a></li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="apps-tasks.html" class="menu-link">
                            <i class="feather icon-clipboard"></i>
                            <span> Tasks </span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="icon feather icon-gitlab"></i>
                            <span> Projects </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="apps-projects-list.html">List</a></li>
                            <li><a href="apps-projects-details.html">Details</a></li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="javascript: void(0);" class="menu-link">
                            <i class="dripicons-browser"></i>
                            <span> Layouts </span>
                            <span class="menu-sub-icon"></span>
                        </a>
                        <ul class="menu-level-second collapse" aria-expanded="false">
                            <li><a href="layouts-horizontal.html">Horizontal</a></li>
                            <li><a href="layouts-light-sidenav.html">Light Sidenav</a></li>
                            <li><a href="layouts-dark.html">layouts dark</a></li>
                            <li><a href="layouts-collapsed.html">Collapsed Sidenav</a></li>
                            <li><a href="layouts-boxed-vertical.html">Boxed Vertical</a></li>
                            <li><a href="layouts-boxed-horizontal.html">Boxed Horizontal</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- Menu link end -->
                <!-------------------------------------->

                <div class="clearfix"></div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- ===============     side menu content End   ================= -->
        <!-- ============================================================= -->


        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="content-page">
            <div class="content">

                <!-- ============================================================= -->
                <!-- ===============    Top bar header content start  ================= -->
                <!-- ============================================================= -->
                <div class="navbar-custom">
                    <!------------------------------------->
                    <!-- right side topbar content start -->
                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <li class="dropdown notification-list topbar-dropdown">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-mail noti-icon"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-map-pin text-muted"></i> &nbsp; Loction</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-upload-cloud text-muted"></i> &nbsp; Upload File</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-activity text-muted"></i> &nbsp; Report</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-life-buoy text-muted"></i> &nbsp; Support</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-github text-muted"></i> &nbsp; Github</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-slack text-muted"></i> &nbsp; Slack</a>
                            </div>
                        </li>

                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="feather icon-bell noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0">
                                        <span class="float-right">
                                            <a href="javascript: void(0);" class="text-dark">
                                                <small>Clear All</small>
                                            </a>
                                        </span>Notification <span class="badge badge-danger badge-pill">5 new</span>
                                    </h5>
                                </div>
                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">New order has been received.
                                            <small class="text-muted">1 min ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-account-plus"></i>
                                        </div>
                                        <p class="notify-details">Membership application has been added.
                                            <small class="text-muted">5 hours ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Cristina Pride</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>New report file has been uploaded.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-primary">
                                            <i class="mdi mdi-comment-account-outline"></i>
                                        </div>
                                        <p class="notify-details">Database sever #2 has been fully restarted.
                                            <small class="text-muted">4 days ago</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon">
                                            <img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
                                        <p class="notify-details">Karen Robinson</p>
                                        <p class="text-muted mb-0 user-msg">
                                            <small>Membership application has been added.</small>
                                        </p>
                                    </a>
                                    <!-- item end-->
                                    <!-- item start-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info">
                                            <i class="mdi mdi-heart"></i>
                                        </div>
                                        <p class="notify-details">Herry liked
                                            <b>Admin </b>
                                            <small class="text-muted">13 days ago</small>
                                        </p>
                                    </a>
                                </div>
                                <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
                                    View All
                                </a>
                            </div>
                        </li>
                        <li class="dropdown notification-list">
                            <a class="nav-link dropdown-toggle nav-user arrow-none mx-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <span class="account-user-avatar">
                                    <img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
                                </span>
                                <span>
                                    <span class="account-user-name">Rang Avdhut</span>
                                </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-user text-muted"></i> &nbsp; My profile</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-mail text-muted"></i> &nbsp; Messages</a>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-settings text-muted"></i> &nbsp; settings</a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:" class="dropdown-item"><i class="feather icon-power text-danger"></i> &nbsp; Log Out</a>
                            </div>
                        </li>
                    </ul>
                    <!-- right side topbar content end -->
                    <!------------------------------------->

                    <!---------------------------------------------->
                    <!-- Left side topbar content Start -->

                    <!-- Minimenu and mobille toggle button start -->
                    <button class="button-menu-mobile open-left">
                        <i class="feather icon-menu"></i>
                    </button>
                    <!-- Minimenu and mobille toggle button end -->


                    <div class="header-search">
                        <form>
                            <div class="input-group">
                                <span class="feather icon-search"></span>
                                <input type="text" class="form-control" placeholder="Search...">
                            </div>
                        </form>
                    </div>
                    <!-- Left side topbar content end -->
                    <!------------------------------------->
                </div>
                <!-- ================================================================== -->
                <!-- ===============    Top bar header content end  ================= -->
                <!-- ================================================================== -->


                <!-- Start Content-->
                <div class="container-fluid">

                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="javascript: void(0);">Icons</a></li>
                                        <li class="breadcrumb-item active">Ion Icons</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">Ion Icons</h4>
                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5>Ion Icon</h5>
                                        </div>
                                        <div class="col-md-6 text-lg-right">
                                            <div class="input-group mb-0">
                                                <input type="text" id="find-icon" class="form-control" placeholder="search . . ">
                                                <div class="input-group-append">
                                                    <button class="btn btn-primary" type="submit"><span class="mdi mdi-magnify"></span></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="icons-list-demo i-main" id="icon-wrapper"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div> <!-- container -->

            </div> <!-- content -->

            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->

            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            © Shimba - by Beethemesdesign
                        </div>
                        <div class="col-md-6">
                            <div class="text-md-right footer-links d-none d-md-block">
                                <a href="javascript: void(0);">Buy Now</a>
                                <a href="http://www.bootstrapmb.com/">Rate us</a>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- ============================================================= -->
            <!-- ===============    footer content start  ================= -->
            <!-- ============================================================= -->


        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->


    </div>
    <!-- END wrapper -->





    <!-- Required js -->
    <script src="assets/js/app.js"></script>

    <script type="text/javascript">
        var iconarray = [
            'ios-add', 'md-add', 'ios-add-circle', 'md-add-circle', 'ios-add-circle-outline', 'md-add-circle-outline', 'ios-airplane', 'md-airplane', 'ios-alarm', 'md-alarm', 'ios-albums', 'md-albums', 'ios-alert',
            'md-alert', 'ios-american-football', 'md-american-football', 'ios-analytics', 'md-analytics', 'ios-aperture', 'md-aperture', 'ios-apps', 'md-apps', 'ios-appstore', 'md-appstore', 'ios-archive', 'md-archive',
            'ios-arrow-back', 'md-arrow-back', 'ios-arrow-down', 'md-arrow-down', 'ios-arrow-dropdown', 'md-arrow-dropdown', 'ios-arrow-dropdown-circle', 'md-arrow-dropdown-circle', 'ios-arrow-dropleft', 'md-arrow-dropleft',
            'ios-arrow-dropleft-circle', 'md-arrow-dropleft-circle', 'ios-arrow-dropright', 'md-arrow-dropright', 'ios-arrow-dropright-circle', 'md-arrow-dropright-circle', 'ios-arrow-dropup', 'md-arrow-dropup',
            'ios-arrow-dropup-circle', 'md-arrow-dropup-circle', 'ios-arrow-forward', 'md-arrow-forward', 'ios-arrow-round-back', 'md-arrow-round-back', 'ios-arrow-round-down', 'md-arrow-round-down', 'ios-arrow-round-forward',
            'md-arrow-round-forward', 'ios-arrow-round-up', 'md-arrow-round-up', 'ios-arrow-up', 'md-arrow-up', 'ios-at', 'md-at', 'ios-attach', 'md-attach', 'ios-backspace', 'md-backspace', 'ios-barcode', 'md-barcode',
            'ios-baseball', 'md-baseball', 'ios-basket', 'md-basket', 'ios-basketball', 'md-basketball', 'ios-battery-charging', 'md-battery-charging', 'ios-battery-dead', 'md-battery-dead', 'ios-battery-full', 'md-battery-full',
            'ios-beaker', 'md-beaker', 'ios-bed', 'md-bed', 'ios-beer', 'md-beer', 'ios-bicycle', 'md-bicycle', 'ios-bluetooth', 'md-bluetooth', 'ios-boat', 'md-boat', 'ios-body', 'md-body', 'ios-bonfire', 'md-bonfire',
            'ios-book', 'md-book', 'ios-bookmark', 'md-bookmark', 'ios-bookmarks', 'md-bookmarks', 'ios-bowtie', 'md-bowtie', 'ios-briefcase', 'md-briefcase', 'ios-browsers', 'md-browsers', 'ios-brush', 'md-brush', 'ios-bug',
            'md-bug', 'ios-build', 'md-build', 'ios-bulb', 'md-bulb', 'ios-bus', 'md-bus', 'ios-business', 'md-business', 'ios-cafe', 'md-cafe', 'ios-calculator', 'md-calculator', 'ios-calendar', 'md-calendar', 'ios-call',
            'md-call', 'ios-camera', 'md-camera', 'ios-car', 'md-car', 'ios-card', 'md-card', 'ios-cart', 'md-cart', 'ios-cash', 'md-cash', 'ios-cellular', 'md-cellular', 'ios-chatboxes', 'md-chatboxes', 'ios-chatbubbles',
            'md-chatbubbles', 'ios-checkbox', 'md-checkbox', 'ios-checkbox-outline', 'md-checkbox-outline', 'ios-checkmark', 'md-checkmark', 'ios-checkmark-circle', 'md-checkmark-circle', 'ios-checkmark-circle-outline',
            'md-checkmark-circle-outline', 'ios-clipboard', 'md-clipboard', 'ios-clock', 'md-clock', 'ios-close', 'md-close', 'ios-close-circle', 'md-close-circle', 'ios-close-circle-outline', 'md-close-circle-outline',
            'ios-cloud', 'md-cloud', 'ios-cloud-circle', 'md-cloud-circle', 'ios-cloud-done', 'md-cloud-done', 'ios-cloud-download', 'md-cloud-download', 'ios-cloud-outline', 'md-cloud-outline', 'ios-cloud-upload',
            'md-cloud-upload', 'ios-cloudy', 'md-cloudy', 'ios-cloudy-night', 'md-cloudy-night', 'ios-code', 'md-code', 'ios-code-download', 'md-code-download', 'ios-code-working', 'md-code-working', 'ios-cog', 'md-cog',
            'ios-color-fill', 'md-color-fill', 'ios-color-filter', 'md-color-filter', 'ios-color-palette', 'md-color-palette', 'ios-color-wand', 'md-color-wand', 'ios-compass', 'md-compass', 'ios-construct', 'md-construct',
            'ios-contact', 'md-contact', 'ios-contacts', 'md-contacts', 'ios-contract', 'md-contract', 'ios-contrast', 'md-contrast', 'ios-copy', 'md-copy', 'ios-create', 'md-create', 'ios-crop', 'md-crop', 'ios-cube', 'md-cube',
            'ios-cut', 'md-cut', 'ios-desktop', 'md-desktop', 'ios-disc', 'md-disc', 'ios-document', 'md-document', 'ios-done-all', 'md-done-all', 'ios-download', 'md-download', 'ios-easel', 'md-easel', 'ios-egg', 'md-egg',
            'ios-exit', 'md-exit', 'ios-expand', 'md-expand', 'ios-eye', 'md-eye', 'ios-eye-off', 'md-eye-off', 'ios-fastforward', 'md-fastforward', 'ios-female', 'md-female', 'ios-filing', 'md-filing', 'ios-film', 'md-film',
            'ios-finger-print', 'md-finger-print', 'ios-fitness', 'md-fitness', 'ios-flag', 'md-flag', 'ios-flame', 'md-flame', 'ios-flash', 'md-flash', 'ios-flash-off', 'md-flash-off', 'ios-flashlight', 'md-flashlight',
            'ios-flask', 'md-flask', 'ios-flower', 'md-flower', 'ios-folder', 'md-folder', 'ios-folder-open', 'md-folder-open', 'ios-football', 'md-football', 'ios-funnel', 'md-funnel', 'ios-gift', 'md-gift', 'ios-git-branch',
            'md-git-branch', 'ios-git-commit', 'md-git-commit', 'ios-git-compare', 'md-git-compare', 'ios-git-merge', 'md-git-merge', 'ios-git-network', 'md-git-network', 'ios-git-pull-request', 'md-git-pull-request',
            'ios-glasses', 'md-glasses', 'ios-globe', 'md-globe', 'ios-grid', 'md-grid', 'ios-hammer', 'md-hammer', 'ios-hand', 'md-hand', 'ios-happy', 'md-happy', 'ios-headset', 'md-headset', 'ios-heart', 'md-heart',
            'ios-heart-dislike', 'md-heart-dislike', 'ios-heart-empty', 'md-heart-empty', 'ios-heart-half', 'md-heart-half', 'ios-help', 'md-help', 'ios-help-buoy', 'md-help-buoy', 'ios-help-circle', 'md-help-circle',
            'ios-help-circle-outline', 'md-help-circle-outline', 'ios-home', 'md-home', 'ios-hourglass', 'md-hourglass', 'ios-ice-cream', 'md-ice-cream', 'ios-image', 'md-image', 'ios-images', 'md-images', 'ios-infinite',
            'md-infinite', 'ios-information', 'md-information', 'ios-information-circle', 'md-information-circle', 'ios-information-circle-outline', 'md-information-circle-outline', 'ios-jet', 'md-jet', 'ios-journal',
            'md-journal', 'ios-key', 'md-key', 'ios-keypad', 'md-keypad', 'ios-laptop', 'md-laptop', 'ios-leaf', 'md-leaf', 'ios-link', 'md-link', 'ios-list', 'md-list', 'ios-list-box', 'md-list-box', 'ios-locate', 'md-locate',
            'ios-lock', 'md-lock', 'ios-log-in', 'md-log-in', 'ios-log-out', 'md-log-out', 'ios-magnet', 'md-magnet', 'ios-mail', 'md-mail', 'ios-mail-open', 'md-mail-open', 'ios-mail-unread', 'md-mail-unread', 'ios-male',
            'md-male', 'ios-man', 'md-man', 'ios-map', 'md-map', 'ios-medal', 'md-medal', 'ios-medical', 'md-medical', 'ios-medkit', 'md-medkit', 'ios-megaphone', 'md-megaphone', 'ios-menu', 'md-menu', 'ios-mic', 'md-mic',
            'ios-mic-off', 'md-mic-off', 'ios-microphone', 'md-microphone', 'ios-moon', 'md-moon', 'ios-more', 'md-more', 'ios-move', 'md-move', 'ios-musical-note', 'md-musical-note', 'ios-musical-notes', 'md-musical-notes',
            'ios-navigate', 'md-navigate', 'ios-notifications', 'md-notifications', 'ios-notifications-off', 'md-notifications-off', 'ios-notifications-outline', 'md-notifications-outline', 'ios-nuclear', 'md-nuclear',
            'ios-nutrition', 'md-nutrition', 'ios-open', 'md-open', 'ios-options', 'md-options', 'ios-outlet', 'md-outlet', 'ios-paper', 'md-paper', 'ios-paper-plane', 'md-paper-plane', 'ios-partly-sunny', 'md-partly-sunny',
            'ios-pause', 'md-pause', 'ios-paw', 'md-paw', 'ios-people', 'md-people', 'ios-person', 'md-person', 'ios-person-add', 'md-person-add', 'ios-phone-landscape', 'md-phone-landscape', 'ios-phone-portrait',
            'md-phone-portrait', 'ios-photos', 'md-photos', 'ios-pie', 'md-pie', 'ios-pin', 'md-pin', 'ios-pint', 'md-pint', 'ios-pizza', 'md-pizza', 'ios-planet', 'md-planet', 'ios-play', 'md-play', 'ios-play-circle',
            'md-play-circle', 'ios-podium', 'md-podium', 'ios-power', 'md-power', 'ios-pricetag', 'md-pricetag', 'ios-pricetags', 'md-pricetags', 'ios-print', 'md-print', 'ios-pulse', 'md-pulse', 'ios-qr-scanner', 'md-qr-scanner',
            'ios-quote', 'md-quote', 'ios-radio', 'md-radio', 'ios-radio-button-off', 'md-radio-button-off', 'ios-radio-button-on', 'md-radio-button-on', 'ios-rainy', 'md-rainy', 'ios-recording', 'md-recording', 'ios-redo',
            'md-redo', 'ios-refresh', 'md-refresh', 'ios-refresh-circle', 'md-refresh-circle', 'ios-remove', 'md-remove', 'ios-remove-circle', 'md-remove-circle', 'ios-remove-circle-outline', 'md-remove-circle-outline',
            'ios-reorder', 'md-reorder', 'ios-repeat', 'md-repeat', 'ios-resize', 'md-resize', 'ios-restaurant', 'md-restaurant', 'ios-return-left', 'md-return-left', 'ios-return-right', 'md-return-right', 'ios-reverse-camera',
            'md-reverse-camera', 'ios-rewind', 'md-rewind', 'ios-ribbon', 'md-ribbon', 'ios-rocket', 'md-rocket', 'ios-rose', 'md-rose', 'ios-sad', 'md-sad', 'ios-save', 'md-save', 'ios-school', 'md-school', 'ios-search',
            'md-search', 'ios-send', 'md-send', 'ios-settings', 'md-settings', 'ios-share', 'md-share', 'ios-share-alt', 'md-share-alt', 'ios-shirt', 'md-shirt', 'ios-shuffle', 'md-shuffle', 'ios-skip-backward',
            'md-skip-backward', 'ios-skip-forward', 'md-skip-forward', 'ios-snow', 'md-snow', 'ios-speedometer', 'md-speedometer', 'ios-square', 'md-square', 'ios-square-outline', 'md-square-outline', 'ios-star', 'md-star',
            'ios-star-half', 'md-star-half', 'ios-star-outline', 'md-star-outline', 'ios-stats', 'md-stats', 'ios-stopwatch', 'md-stopwatch', 'ios-subway', 'md-subway', 'ios-sunny', 'md-sunny', 'ios-swap', 'md-swap', 'ios-switch',
            'md-switch', 'ios-sync', 'md-sync', 'ios-tablet-landscape', 'md-tablet-landscape', 'ios-tablet-portrait', 'md-tablet-portrait', 'ios-tennisball', 'md-tennisball', 'ios-text', 'md-text', 'ios-thermometer',
            'md-thermometer', 'ios-thumbs-down', 'md-thumbs-down', 'ios-thumbs-up', 'md-thumbs-up', 'ios-thunderstorm', 'md-thunderstorm', 'ios-time', 'md-time', 'ios-timer', 'md-timer', 'ios-today', 'md-today', 'ios-train',
            'md-train', 'ios-transgender', 'md-transgender', 'ios-trash', 'md-trash', 'ios-trending-down', 'md-trending-down', 'ios-trending-up', 'md-trending-up', 'ios-trophy', 'md-trophy', 'ios-tv', 'md-tv', 'ios-umbrella',
            'md-umbrella', 'ios-undo', 'md-undo', 'ios-unlock', 'md-unlock', 'ios-videocam', 'md-videocam', 'ios-volume-high', 'md-volume-high', 'ios-volume-low', 'md-volume-low', 'ios-volume-mute', 'md-volume-mute',
            'ios-volume-off', 'md-volume-off', 'ios-walk', 'md-walk', 'ios-wallet', 'md-wallet', 'ios-warning', 'md-warning', 'ios-watch', 'md-watch', 'ios-water', 'md-water', 'ios-wifi', 'md-wifi', 'ios-wine', 'md-wine',
            'ios-woman', 'md-woman', 'logo-android', 'logo-angular', 'logo-apple', 'logo-bitbucket', 'logo-bitcoin', 'logo-buffer', 'logo-chrome', 'logo-closed-captioning', 'logo-codepen', 'logo-css3', 'logo-designernews',
            'logo-dribbble', 'logo-dropbox', 'logo-euro', 'logo-facebook', 'logo-flickr', 'logo-foursquare', 'logo-freebsd-devil', 'logo-game-controller-a', 'logo-game-controller-b', 'logo-github', 'logo-google',
            'logo-googleplus', 'logo-hackernews', 'logo-html5', 'logo-instagram', 'logo-ionic', 'logo-ionitron', 'logo-javascript', 'logo-linkedin', 'logo-markdown', 'logo-model-s', 'logo-no-smoking', 'logo-nodejs', 'logo-npm',
            'logo-octocat', 'logo-pinterest', 'logo-playstation', 'logo-polymer', 'logo-python', 'logo-reddit', 'logo-rss', 'logo-sass', 'logo-skype', 'logo-slack', 'logo-snapchat', 'logo-steam', 'logo-tumblr', 'logo-tux',
            'logo-twitch', 'logo-twitter', 'logo-usd', 'logo-vimeo', 'logo-vk', 'logo-whatsapp', 'logo-windows', 'logo-wordpress', 'logo-xbox', 'logo-xing', 'logo-yahoo', 'logo-yen', 'logo-youtube'
        ];
        for (var i = 0, l = iconarray.length; i < l; i++) {
            $('#icon-wrapper').append(
                '<div class="icon-detl" data-filter="' + iconarray[i] + '">' +
                '<i class="ion ion-' + iconarray[i] + '"></i> <small>ion ion-' + iconarray[i] + '</small>' +
                '</div>');
        }
        $(window).on('load', function() {
            $("#find-icon").on("keyup", function() {
                var g = $(this).val().toLowerCase();
                $(".i-main >div").each(function() {
                    var t = $(this).attr('data-filter');
                    if (t) {
                        var s = t.toLowerCase();
                    }
                    if (s) {
                        var n = s.indexOf(g);
                        if (n !== -1) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                });
            });
        });
    </script>
</body>

</html>
